<template>
    <div style="box-sizing:border-box;padding-bottom: 90rpx" class="detailBox">
      <div class="banner">
<!--        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">-->

<!--          <swiper-item  >-->
            <img :src="dataObj.imgUrl" class="slide-image" mode="widthFix" @click="handleImagePreview(dataObj.imgUrl)"/>
<!--          </swiper-item>-->

<!--        </swiper>-->
      </div>
      <div class="weui-form-preview">
        <!-- <div class="weui-form-preview__hd">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">单价</label>
            <em class="weui-form-preview__value">¥2400.00</em>
          </div>
        </div> -->

        <div class="weui-form-preview__bd">
         <!-- <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">编号</label>
            <span class="weui-form-preview__value">124548578</span>
          </div>

          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">类型</label>
            <span class="weui-form-preview__value">12121212121212</span>
          </div> -->
          <div class="weui-form-preview__item">
            <p style="text-align: center;display: flex;justify-content: center;align-items: center;font-size: 0.9em">上滑查看图片描述 <van-icon name="arrow-up" /></p>
            <p style="text-align: left;color: #000;font-size: 0.9em;text-indent: 20rpx;">
              {{dataObj.description}}
             </p>
          </div>
        </div>

      </div>
<!--      <div class="weui-cells__title">评论</div>-->
<!--      <div class="tabs" style="margin-bottom: 30rpx;">-->
<!--        <template v-if="plList.length">-->
<!--            <div class="listBox" v-for="(item,index) in plList" :key="index">-->
<!--              <img :src="item.headImg" alt="">-->
<!--              <div class="list_content">-->
<!--                <div class="content_top">-->
<!--                  <div>-->
<!--                    <p style="font-size: 30rpx;color:#000">{{item.nickname}}</p>-->
<!--                    <p style="font-size: 22rpx;color:#D1D1D1">{{item.createTime}}</p>-->
<!--                  </div>-->
<!--&lt;!&ndash;                  <van-button type="primary" size="small">联系TA</van-button>&ndash;&gt;-->
<!--                </div>-->

<!--                <div class="content_midd">-->
<!--                  <span class="content_midd_title" >{{item.content}}</span>-->
<!--                </div>-->
<!--                <ul class="content_bt">-->
<!--                  <li @click="deleteFun(item.id)" style="font-size: 28rpx;color: red" v-if="userId==item.userId">删除</li>-->
<!--                  <li @click="huiFuFun(item.id)" style="font-size: 28rpx">回复</li>-->
<!--                </ul>-->
<!--                <ul class="message_box" v-if="item.replyList.length">-->
<!--                  <li v-for="(a,i) in item.replyList" :key="i" style="display: flex;justify-content: space-between">-->
<!--                    <span>-->
<!--                       <span >-->
<!--                    {{a.nickname}}:-->
<!--                  </span>-->
<!--                    <span>{{a.content}}</span>-->
<!--                    </span>-->
<!--                    <span style="color: red" @click="deleteHuiFun(a.id)" v-if="userId==item.userId">-->
<!--                      删除-->
<!--                    </span>-->
<!--                  </li>-->

<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--        </template>-->
<!--        <template v-else>-->
<!--          <p style="text-align: center">-->
<!--            暂无评论-->
<!--          </p>-->
<!--        </template>-->

<!--      </div>-->
<!--      <modelMessage ref="modelMessage"></modelMessage>-->
<!--      <ul class="box" v-if="isOpen">-->
<!--        <li v-if="isSc">-->

<!--          <p>收藏名片</p>-->
<!--        </li>-->
<!--        <li v-if="isShare">-->
<!--          <button open-type="share" data-name="pageShare" id="share" @click="onShareAppMessage">-->
<!--            <img src="../../../static/images/share1.png" alt="">-->
<!--            <p>分享</p>-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <van-goods-action>-->
<!--&lt;!&ndash;        <van-goods-action-icon&ndash;&gt;-->
<!--&lt;!&ndash;          icon="home-o"&ndash;&gt;-->
<!--&lt;!&ndash;          text="首页"&ndash;&gt;-->
<!--&lt;!&ndash;          url="/pages/index/main"&ndash;&gt;-->
<!--&lt;!&ndash;          @click="onClickIcon"&ndash;&gt;-->
<!--&lt;!&ndash;        />&ndash;&gt;-->
<!--        &lt;!&ndash;  <van-goods-action-icon-->
<!--            icon="chat-o"-->
<!--            text="咨询"-->
<!--            @click="onClickIcon"-->
<!--          /> &ndash;&gt;-->
<!--      <van-goods-action-button text="返回首页"  type="primary " @click="openBox"/>-->
<!--      </van-goods-action>-->
<!--      <van-action-sheet :show="show" title="返回首页"  @close="onClose">-->
<!--       <div style="box-sizing: border-box;padding:20rpx;">-->
<!--         <form @submit='addMessage'>-->
<!--           <textarea class="weui-textarea" :value="message" @blur="onInput($event)" placeholder="请输入您的评论" rows="3"></textarea>-->
<!--           <div class="weui-form__opr-area">-->
<!--             <button class="weui-btn weui-btn_primary" form-type="submit" id="showTooltips">提交</button>-->
<!--           </div>-->
<!--         </form>-->
<!--       </div>-->
<!--      </van-action-sheet>-->
<!--      <van-action-sheet :show="huiShow" title="回复"  @close="onHuiClose">-->
<!--        <div style="box-sizing: border-box;padding:20rpx;">-->
<!--          <form @submit='addHuiMessage'>-->
<!--            <textarea class="weui-textarea" :value="huiMessage"  @blur="onInputHui($event)" placeholder="请输入您的回复" rows="3"></textarea>-->
<!--            <div class="weui-form__opr-area">-->
<!--              <button class="weui-btn weui-btn_primary" form-type="submit" id="showTooltipss">提交</button>-->
<!--            </div>-->
<!--          </form>-->
<!--        </div>-->
<!--      </van-action-sheet>-->
      <van-dialog id="van-dialog" />

    </div>


<!--    </div>-->

</template>

<script>
    import Dialog from '../../../static/vant-weapp/dist/dialog/dialog';

    export default {
        name: "index",
      data(){
          return {
              show:false,
            indicatorDots: false,
            autoplay: true,
            interval: 3000,
              message:"",
              huiMessage:"",
              huiShow:false,
            duration: 500,
              active: 1,
              isOpen:true,
              isSc:false,
              isShare:true,
              isOpen:false,
              commentId:"",
              userId:"",
              pageNum:1,
              result:[],
              pageSize:10,
             dataObj:{},
              plList:[],
              isShow:false,//是否授权
            images:[]
          }
      },
      onLoad(id){
         this.id=id.id;
          this.userId = wx.getStorageSync('userId');
      },
      onShow(){
        wx.setNavigationBarTitle({
          title: "产品详情"
        })
          this.pageNum=1;
        this.getList();
        // this.getPLList();
      },
      onPullDownRefresh(){
          this.pageNum=1;
        this.getList();
        // this.getPLList(this.id)
      },
        onReachBottom () {
            // wx.showNavigationBarLoading()
           // console.log('pull')
            if(this.result.length){
                this.pageNum++;
            }
            // this.getPLList(this.id)
            // wx.stopPullDownRefresh()
        },
      methods:{
        handleImagePreview (img) { // 预览图片
          let imgs= JSON.parse(wx.getStorageSync('list'));
          let imgUrl=imgs.map((item)=>{
            return item.imgUrl
          });
          let index=0;
          imgUrl.forEach((a,i)=>{
            if(a==img){
              index=i;
            }
          })
         // console.log(index)

          // const images = [this.dataObj.imgUrl]
          // let arr = []
          // this.images.forEach((a, i) => {
          //   arr.push(a.imgUrl)
          // })
          // console.log(images)
          wx.previewImage({
            current: imgUrl[index], // 当前预览的图片
            urls: imgUrl // 所有要预览的图片
          })
        },
          changeDomFun(){
              wx.setStorageSync('isEdit', 0)
          },
          deleteHuiFun(id){
              Dialog.confirm({
                  title: '提示',
                  message: '确认删除?'
              }).then(() => {
                  this.$http.request({
                      method:'get',
                      url:`/api/materialCommentReply/delete`,
                      body:{
                          materialCommentReplyId:id
                      }
                  }).then((data)=> {
                      if (data.code == 200) {
                          wx.showToast({
                              title: '删除成功',
                              icon: 'success',
                              duration: 2000,
                              success: () => {
                                  this.pageNum=1;
                                  this.getPLList();
                              }

                          })
                      }else{
                          wx.showToast({
                              title: `${data.message}` ,
                              icon: 'none',
                              duration: 2000
                          })
                      }
                  })
              }).catch(() => {
                  // on cancel
              });
          },
          deleteFun(id){
              Dialog.confirm({
                  title: '提示',
                  message: '确认删除?'
              }).then(() => {
                      this.$http.request({
                          method:'get',
                          url:`/api/materialComment/delete`,
                          body:{
                              materialCommentId:id
                          }
                      }).then((data)=> {
                          if (data.code == 200) {
                              wx.showToast({
                                  title: '删除成功',
                                  icon: 'success',
                                  duration: 2000,
                                  success: () => {
                                      this.pageNum=1;
                                      this.getPLList();
                                  }

                              })
                          }else{
                              wx.showToast({
                                  title: `${data.message}` ,
                                  icon: 'none',
                                  duration: 2000
                              })
                          }
                      })
              }).catch(() => {
                  // on cancel
              });
          },
          onClose(){
              // this.show=false;
            // /pages/index/main
            wx.reLaunch({ url: 'pages/cardDetail/main' })
          },
          onHuiClose(){
            this.huiShow=false;
          },
          addHuiMessage(){

            console.log(this.huiMessage)
              let cartId = wx.getStorageSync('cartId');
              let userId = wx.getStorageSync('userId');
              if(this.huiMessage){
                  this.$http.request({
                      method:'post',
                      url:`/api/materialCommentReply/add`,
                      body:{
                          "commentId": this.commentId,
                          "content": this.huiMessage,
                          "userId": userId
                      }
                  }).then((data)=>{
                      if(data.code==200){
                          wx.showToast({
                              title: '回复成功',
                              icon: 'success',
                              duration: 2000,
                              success:()=>{
                                  this.huiShow=false;
                                  this.huiMessage="";
                                  this.pageNum=1;
                                  this.getPLList();
                              }

                          })
                      }else{
                          wx.showToast({
                              title: `${data.message}` ,
                              icon: 'none',
                              duration: 2000
                          })
                      }
                  }).catch((err)=>{

                  })
              }else{
                  wx.showToast({
                      title: `请输入评论` ,
                      icon: 'none',
                      duration: 2000
                  })
              }
          },
          onInputHui(e){
              this.huiMessage=e.mp.detail.value;
          },
          huiFuFun(id){
              let userInfo = wx.getStorageSync('userInfo')
              this.commentId=id;
              if(userInfo){
                  this.huiShow=true;
              }else{

              }


          },
          onInput(e){
              console.log(e)
              this.message=e.mp.detail.value;
          },
          addMessage(){
              let cartId = wx.getStorageSync('cartId');
              let userId = wx.getStorageSync('userId');
              if(this.message){
                  this.$http.request({
                      method:'post',
                      url:`/api/materialComment/add`,
                      body:{
                          "cardId": cartId,
                          "content": this.message,
                          "materialId": this.id,
                          "userId": userId
                      }
                  }).then((data)=>{
                      if(data.code==200){
                          wx.showToast({
                              title: '评论成功',
                              icon: 'success',
                              duration: 2000,
                              success:()=>{
                                  this.show=false;
                                  this.message="";
                                  this.pageNum=1;
                                  this.getPLList();
                              }

                          })
                      }else{
                          wx.showToast({
                              title: `${data.message}` ,
                              icon: 'none',
                              duration: 2000
                          })
                      }
                  }).catch((err)=>{

                  })
              }else{
                  wx.showToast({
                      title: `请输入评论` ,
                      icon: 'none',
                      duration: 2000
                  })
              }


          },
          onChange(val){

          },
          openBox(){
            if(wx.getStorageSync('cartId')){
              wx.reLaunch({ url: 'pages/cardDetail/main' })
            }else{
              wx.redirectTo({ url: 'pages/index/main' })
            }
            //   let userInfo = wx.getStorageSync('userInfo')
            //   if(userInfo){
            //       this.show=true;
            //   }else{
            //
            //   }
            //
            // console.log(this.show)
          },
            getPLList(){


                // this.$http.request({
                //     method:'post',
                //     url:`/api/materialComment/getCommentAndReplyPListByMaterialId`,
                //     body:{
                //         "materialId": this.id,
                //         "pageNum": this.pageNum,
                //         "pageSize": this.pageSize
                //     }
                // }).then((data)=>{
                //     if(data.code==200){
                //       wx.stopPullDownRefresh();
                //       wx.hideLoading()
                //         this.result=data.data.list;
                //         if (this.pageNum > 1) {
                //             this.plList.push(... data.data.list)
                //         }else{
                //             this.plList = data.data.list;
                //         }
                //     //this.plList=data.data.list;
                //     }
                // }).catch((err)=>{
                // })
            },
        getList(){
          this.$http.request({
            method:'get',
            url:`/api/material/detail/${this.id}`
          }).then((data)=>{
            if(data.code==200){
              wx.stopPullDownRefresh();
              wx.hideLoading()
               this.dataObj=data.data;
                // this.dataObj.imgUrl=this.dataObj.imgUrl

                // this.list=data.data.materialList;
                // console.log(this.list)
            }
          }).catch((err)=>{

          })
        },
      }
    }
</script>

<style scoped>
  .detailBox ._van-icon{
    margin-left: 10rpx;
  }
  .detailBox .weui-form-preview__value{
    color: #000;
  }
  .detailBox .weui-form-preview__bd{
    font-size: 1.2em;
  }
  .zanBox{
    font-size: 22rpx;
    padding:10rpx;
    background: #f7f7f7;
    display: flex;
    justify-content: flex-start;
  }
  .message_box{
    background: #f7f7f7;
    padding:10rpx;
    margin-top:20rpx;
    font-size: 22rpx;
  }
  .listBox{
    width: 100%;
    background: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding:10rpx 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .listBox>img{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;

  }
  .content_bt{
    font-size: 24rpx;
    color:#D1D1D1 ;
    display: flex;
    justify-content: flex-end;
    margin-top:30rpx;
  }
  .content_bt>li{
    position: relative;
    margin-left: 20rpx;
  }
  .module{
    position: absolute;
    width: 0;
    overflow: hidden;
    height: 40rpx;
    bottom:0;
    right: 31rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #333333;
    transition: all 0.2s inherit;

  }
  .module.active{
    width: 300rpx;
    transition: all 0.2s inherit;
  }
  .module>li{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .content_img{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top:30rpx;
  }
  .content_img>li{
    width: 30%;
    height: 120rpx;

    position: relative;
  }
  .content_img>li>p{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    font-size: 36rpx;
    color: #fff;
    text-align:center;
    line-height: 120rpx;
  }
  .content_img>li>img{
    max-width: 100%;
    height: 120rpx;
  }
  .content_midd_title{
    font-size: 28rpx;
    width: 100%;
    color:#000;
    /*display: -webkit-box;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    word-wrap: break-word;
    /*white-space: normal !important;*/
    /*-webkit-line-clamp: 2;*/
    /*-webkit-box-orient: vertical;*/

  }
  .list_content{
    width: 85%;

  }
  .content_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .forum{
    width: 100%;

  }
  .forum>img{
    width: 100%;

  }
  .box{
    width: 74rpx;
    height: 240rpx;
    background-color: #fff;

    /* border: 1px solid rgb(61,176,243); */
    border-radius: 30rpx;
    position: fixed;
    top:50%;
    right: 5%;
    font-size: 22rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
    transform :translateY(-135rpx);
  }
  .box>li{
    width: 100%;

  }
  #share{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border:none;
    padding-left: 0;
    padding-right: 0;
    font-size: 24rpx;

  }
  #share:after{
    border:none;
  }
  .box>li:first-child{
    margin-bottom: 10rpx;
  }
  .box img{
    width: 40rpx;
    height: 40rpx;
  }
  .banner .slide-image{
    width: 100%;
    /*height: 500rpx;*/
  }
  .banner ._swiper{
      height: 500rpx;
  }
   .swiper img{
     width: 100%;
   }
  .detail{
    width: 100%;
    background: #fff;
  }
  .list{

  }
</style>
